<template>
	<view>

		<mc-framework navTitle="MES工控机" @changeLevel="changeLevel" @addClockStatus='addClockStatus'>

			<view class="contentBox">
				<view class="grid-container">
					<view class="grid-item y-f" v-for="item in moduleData_show" :key="item.APPFunID"
						@click="itemClick(item)">
						<uni-icons :fontFamily="item.CustomFont" :size="24"
							:color="item.AP_Colour">{{ $utils.toUniCode(item.PIC_PH) }}</uni-icons>
						<view style="margin-top: 10px;">
							<text>{{item.APFunName}}</text>
						</view>
					</view>
				</view>

			</view>

		</mc-framework>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				moduleData_basic: [],
				moduleData_show: [],
				show: false,
				getEquipmentList: []
			};
		},
		onLoad(val) {
			let routes = getCurrentPages().length;
			plus.screen.lockOrientation('landscape-primary');
			if (val.data) {
				var list = JSON.parse(JSON.stringify(val.data))

				let backData = this.$store.state.GuyueModule.ModuleData_select.filter(item => {
					return item.APPFunID == list
				});
				this.moduleData_show = backData[0]['nood'][0]['children'];
			} else {
				this.getModuleData();
				let routes = getCurrentPages();
				let currentRoute = routes[routes.length - 1];

				this.$store.commit('GuyueModule/ChangeAndSetStateData', {
					Name1: 'mesRouteInfo',
					data: {
						routeIndex: routes.length,
						route: currentRoute.route,
						options: currentRoute.options,
					}
				})
			}
			this.$store.state.GuyueModule.MesBasicInfo.Status.ClockStatusTitle = '首页'

		},
		oshow() {
			this.$store.state.GuyueModule.MesBasicInfo.Status.ClockStatusTitle = '首页'
		},
		mounted() {
			let that = this;
			uni.$on('changeLevel', function(data, row) {
				that.changeLevel(data, row)
			})

		},
		onUnload() {
			let routes = getCurrentPages();
			if (routes.length != this.$store.state.GuyueModule.mesRouteInfo.routeIndex) {
				// console.log('注销1');

			} else {
				// console.log('注销2');
				uni.$off('changeLevel');
				plus.screen.lockOrientation('portrait-primary');
				// 重置工作台已选内容
				this.$store.commit('GuyueModule/ChangeAndSetStateData', {
					Name1: 'ModuleData_select',
					data: [{
						length: routes.length,
						Name: '工作台',
						APPFunID: 0,
						nood: []
					}]
				});

				// 清除模块数据 
				this.$store.commit('GuyueModule/ChangeAndSetStateData', {
					Name1: 'ModuleData',
					data: []
				});

				// 清除基础展示数据
				// this.$store.commit('GuyueModule/ChangeAndSetStateData', {
				// 	Name1: 'MesBasicInfo',
				// 	data: {}
				// });

				// 清除工作台页面栈信息
				this.$store.commit('GuyueModule/ChangeAndSetStateData', {
					Name1: 'mesRouteInfo',
					data: {}
				});
			}
		},

		methods: {

			addClockStatus(str) {
				var that = this
				console.log(str);
			},
			changeLevel(data, row) {
				if (data.length == 1) { // 顶级
					this.moduleData_show = this.$store.state.GuyueModule.ModuleData;
				} else {
					let backData = data.filter(item => {
						return item.APPFunID == row.APPFunID
					});
					this.moduleData_show = backData[0]['nood'][0]['children'];
				}
			},
			getModuleData() { // 获取数据
				let that = this;
				var list = JSON.parse(JSON.stringify(this.$store.state.appConfigInfo.ActiveModule.authPages))
				list = list.filter(item => item.IsHomepage !== true);
				let backData = this.buildTree(list);

				this.$store.commit('GuyueModule/ChangeAndSetStateData', {
					Name1: 'ModuleData',
					data: backData
				})
				this.moduleData_basic = JSON.parse(JSON.stringify(backData));
				this.moduleData_show = JSON.parse(JSON.stringify(backData));
				
			},
			buildTree(items) {
				// 创建一个映射，用于快速查找具有特定ID的菜单项  
				const map = {};
				items.forEach(item => {
					map[item.APPFunID] = item;
					item.children = []; // 初始化子菜单数组  
				});

				// 构建树  
				const tree = [];
				items.forEach(item => {
					// 查找父菜单项，并添加到其children数组中  
					// 如果UpID为0，则它是根节点，直接添加到树数组中  
					if (item.UpID === 0) {
						tree.push(item);
					} else if (map[item.UpID]) {
						map[item.UpID].children.push(item);
					}
				});

				return tree;
			},
			itemClick(data) { // 点击模块数据 
				let nood = this.moduleData_show.filter(item => {
					return item.APPFunID == data.APPFunID
				});
				var UrlShow = false
				let routes = getCurrentPages();
				let obj = {
					length: routes.length + 1,
					Name: data.APFunName,
					APPFunID: data.APPFunID,
					nood: nood
				}
				if (!data.children.length) { // 判断是否存在子数据
					UrlShow = true
				} else {
					obj.length = routes.length
				}
				this.moduleData_show = this.$utils.deepClone(data['children']);
				let newData = JSON.parse(JSON.stringify(this.$store.state.GuyueModule.ModuleData_select));
				newData.push(obj);
				this.$store.commit('GuyueModule/ChangeAndSetStateData', {
					Name1: 'ModuleData_select',
					data: newData
				})

				if (UrlShow) {
					uni.navigateTo({
						url: data.AP_Link,
						animationType: 'slide-in-right', // 动画类型
						animationDuration: 300 // 动画时长
					});
				}

			}

		}
	}
</script>

<style lang="scss">
	.contentBox {
		width: 100%;
		overflow: auto;
	}

	/* 如果需要每行恰好三个格子，并且格子大小固定或可预测，可以这样做： */
	.grid-container {
		width: 100%;
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		grid-gap: 14px;
	}

	.grid-item {
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		height: 100px;
		background-color: #50cfce;
		color: #fff;
		border-radius: 8px;
	}
</style>